<template>
  <!-- <div id="Fin"> -->
  <!-- <p>&emsp;|&emsp;学员信息</p> -->
  <div id="finance" style="width: 560px; height: 400px"></div>
  <!-- </div> -->
</template>

<script>
import echarts from "echarts";
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      let dataAxis = [
        "03-01",
        "03-02",
        "03-03",
        "03-04",
        "03-05",
        "03-06",
        "03-07",
        "03-08",
        "03-09",
        "03-10",
      ];
      // prettier-ignore
      let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321];
      let yMax = 500;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      var fin = echarts.init(document.getElementById("finance"));
      fin.setOption({
        title: {
          text: "财务数据",
          subtext: "Feature Sample: Gradient Color, Shadow, Click Zoom",
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: false,
            color: "black",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            //是否显示坐标轴线
            show: false,
          },
          axisTick: {
            //是否显示坐标轴刻度
            show: false,
          },
          axisLabel: {
            //y轴文字颜色
            color: "#343434",
          },
        },
        dataZoom: [
          {
            type: "inside", //缩放功能
          },
        ],
        series: [
          {
            type: "bar", //柱状图
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: "#188df0" },
                { offset: 0.5, color: "#188df0" },
                { offset: 0, color: "#83bff6" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            data: data,
          },
        ],
      });
    },
  },
};
</script>

<style lang = 'less' scoped>
#finance {
  background-color: white;
  /* p{
    font-weight: 1000;
    color: #438afe;
    height: 60px;
    line-height: 60px;
  } */
}
/deep/ .el-col-12 {
  width: 570px;
}
</style>